<template>
   <div class="dialog">
      我是子类使用mapGetters/mapState,目前的默认状态：{{show}}      
    <p></p>
      <div>子类中使用mapState展示我的名字：{{getMyName}}</div>
    </div> 
</template>
<script>
import {mapGetters, mapState} from 'Vuex';
export default {
    props:{ //此方法是将父组件传递给子组件,如果使用vuex状态管理,则无需再使用props进行获取值,直接使用computed进行获取值
    //   show: {
    //     type: Boolean,
    //     default:true    
    //   }
    },
    data() {
      return {};
    },
    computed: {
    //   ...mapGetters({
    //     show: 'show'
    //  }),
        ...mapState({
           show: state => state.compute.show
        }),
     // state相当于对外的只读状态，不能通过store.state.user.name来更改，使用store.commit方法通过触发mutations改变state
      getMyName()  {
        console.log(this.$store.state);
        console.log(this.$store.state.compute);
        console.log('子组件computed()使用this.$store.state.name: ' + this.$store.state.compute.name);
        return this.$store.state.compute.name;
      }
    },
    mounted() {
      //初始化渲染
       console.log('子组件mounted()使用this.$store.state.name: ' + this.$store.state.compute.name);
    }
}
</script>

